@import './variables.scss';

$font-size:   (xs: 10px, s: 12px, m: 14px, l: 16px, xl: 18px);
$line-height: (xs: 14px, s: 14px, m: 18px, l: 20px, xl: 24px);
$font-color: (xs: rgba(0,0,0), s: rgba(0,0,0), m: rgba(0,0,0, .8), l: rgba(0,0,0, .6), xl: rgba(0,0,0, .4));
$font-color-map: ('black': rgba(0, 0, 0), 'red': rgb(255, 0, 0), 'white': rgb(255, 255, 255), 'primary': $primary-color);
$bg-color:       ('black': rgba(0, 0, 0), 'red': rgb(255, 0, 0), 'white': rgb(255, 255, 255), 'primary': $primary-color);
$border-color:   ('black': rgba(0, 0, 0), 'red': rgb(255, 0, 0), 'white': rgb(255, 255, 255), 'primary': $primary-color);
$border-radius: (xs: 4px, s: 6px, m: 10px, l: 12px, xl: 12px, 0: 0);
$border-radius-map: (circle: 50%);
$gap: (0: 0, xxs: 4px, xs: 6px, s: 8px, m: 10px, l: 12px, xl: 16px, xxl: 20px);
$icon-size: (xs: 12px, s: 14px, m: 16px, l: 18px, xl: 20px);
$icon-color: (primary: $primary-color);
$pic-size-3-4: (xs-w: 76px, xs-h: 100px, s-w: 84px, s-h: 112px, m-w: 105px, m-h: 140px, l-w: 160px, l-h: 228px);
$pic-size-1-1: (xs: 76px, s: 84px, m: 105px, l: 160px);
$pic-size-4-3: (xs-w: 100px, xs-h: 76px, s-w: 112px, s-h: 84px, m-w: 140px, m-h: 105px, l-w: 228px, l-h: 160px);
$pic-size-16-9: (xs-w: 32px, xs-h: 18px, s-w: 105px, s-h: 59px, m-w: 105px, m-h: 59px, l-w: 160px, l-h: 90px);

:root {
  /* 行高 */
  @each $item, $val in $line-height {
    --#{$prefix}-line-height-#{$item}: #{$val};
    .#{$prefix}-line-height-#{$item}{ line-height: var(--#{$prefix}-line-height-#{$item}); }
  }
  /* 文字大小 */
  @each $item, $val in $font-size {
    --#{$prefix}-font-size-#{$item}: #{$val};
    .#{$prefix}-font-size-#{$item}, .#{$prefix}-size-#{$item}{ 
      font-size: var(--#{$prefix}-font-size-#{$item}); 
      line-height: var(--#{$prefix}-line-height-#{$item});
    }
  }
  /* 文本亮度 */
  @each $item, $val in $font-color {
    --#{$prefix}-font-color-#{$item}: #{$val};
    .#{$prefix}-font-color-#{$item}, .#{$prefix}-color-#{$item}{ color: var(--#{$prefix}-font-color-#{$item}); }
  }
  @each $item, $val in $font-color-map {
    --#{$prefix}-font-color-#{$item}: #{$val};
    .#{$prefix}-font-color-#{$item}, .#{$prefix}-color-#{$item}{ color: var(--#{$prefix}-font-color-#{$item}); }
  }
  /* 背景亮度 */
  @each $item, $val in $bg-color {
    --#{$prefix}-background-color-#{$item}: #{$val};
    .#{$prefix}-bg-color-#{$item}{ background-color: var(--#{$prefix}-background-color-#{$item}); }
  }
  /* 边框颜色 */
  @each $item, $val in $border-color {
    --#{$prefix}-border-color-#{$item}: #{$val};
    .#{$prefix}-border-color-#{$item}{ border-color: var(--#{$prefix}-border-color-#{$item}); }
  }
  /* 边框圆角 */
  @each $item, $val in $border-radius {
    --#{$prefix}-border-radius-#{$item}: #{$val};
    .#{$prefix}-border-radius-#{$item}{ border-radius: var(--#{$prefix}-border-radius-#{$item}); }
  }
  @each $item, $val in $border-radius-map{
    --#{$prefix}-border-radius-#{$item}: #{$val};
    .#{$prefix}-border-radius-#{$item}{ border-radius: var(--#{$prefix}-border-radius-#{$item}); }
  }
  /* 距离 */
  @each $item, $val in $gap{
    --#{$prefix}-gap-#{$item}: #{$val};
    .#{$prefix}-margin-#{$item}{ margin: var(--#{$prefix}-gap-#{$item}); }
    .#{$prefix}-margin-top-#{$item}{ margin-top: var(--#{$prefix}-gap-#{$item}); }
    .#{$prefix}-margin-left-#{$item}{ margin-left: var(--#{$prefix}-gap-#{$item}); }
    .#{$prefix}-margin-right-#{$item}{ margin-right: var(--#{$prefix}-gap-#{$item}); }
    .#{$prefix}-margin-bottom-#{$item}{ margin-bottom: var(--#{$prefix}-gap-#{$item}); }
    .#{$prefix}-paddding-#{$item}{ padding: var(--#{$prefix}-gap-#{$item}); }
    .#{$prefix}-paddding-top-#{$item}{ padding-top: var(--#{$prefix}-gap-#{$item}); }
    .#{$prefix}-paddding-left-#{$item}{ padding-left: var(--#{$prefix}-gap-#{$item}); }
    .#{$prefix}-paddding-right-#{$item}{ padding-right: var(--#{$prefix}-gap-#{$item}); }
    .#{$prefix}-paddding-bottom-#{$item}{ padding-bottom: var(--#{$prefix}-gap-#{$item}); }
  }
}